<template>
  <div class="goods">
    <!-- List 组件通过 loading 和 finished 两个变量控制加载状态，
    当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
    此时可以发起异步操作并更新数据，数据更新完毕后，
    将 loading 设置成 false 即可。若数据已全部加载完毕，
    则直接将 finished 设置成 true 即可。 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="item in products"
        :key="item._id"
        :num="item.quantity"
        :price="item.price"
        desc="描述信息"
        :title="item.name"
        :thumb="item.coverImg "
        :thumb-link="'/#/detail?id=' + item._id"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
        <template #footer>
          <van-button size="mini" @click="buyHandle(item)"
            >加入购物车</van-button
          >
          <van-button size="mini">按钮</van-button>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { loadProducts } from "../../../api/products";
import { addToCart } from "../../../api/carts";

export default {
  name: "Circum",
  data() {
    return {
      products: [],
      name: "", // 总页码
      page: 1, // 当前页码
      per: 10,
      product_category:"",
      loading: false, // 是否加载中
      finished: false, // 是否加载完成
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    async loadData() {
      this.loading = true;
      const result = await loadProducts({ page: this.page });
      this.products = [...this.products, ...result.products];
      this.pages = result.pages;
      this.page++;
      this.loading = false;
     console.log(this.products)
    },
    async buyHandle(item) {
      const res = await addToCart(item._id, 1);
      console.log(res);
    },
    onLoad() {
      // console.log("加载更多");                                         
      if (this.pages < this.page) {
        this.finished = true;
      } else {
        this.loadData();
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.goods{
position: absolute;
top: 60px;
overflow: auto;
  flex: 1;
}
</style>
